<template>
    <div class="container">
  <div class="row">
    <div class="col 6">
      <div class="row lighten-5">
        <div class="col l8 s8 loginTitle">
          登录
        </div>
        
        <div class="input-field col l12 s12">
          <i class="material-icons prefix">stay_current_portrait</i>
          
          <input id="userName" v-model="userInfo.phone" type="tel" class="validate" length="11">
          <label for="userName" data-error="请输入正确的手机号" data-success="✅">手机号</label>
        </div>
        <div class="input-field col l12 s12 ">
          <i class="material-icons prefix">lock</i>
          <input id="password" v-model="userInfo.password" type="password" class="validate">
          <label for="password">密码</label>
        </div>
        <div class="col l12 s12   center-align">
            <button class="btn waves-effect waves-light "  @click="userLogin()" name="action">登录
            <i class="material-icons right">send</i>
            </button>
        </div>
        <div class="col l12 s12  center-align">
          <label>还没账号？</label>
          <router-link :to="{name: 'register'}">注册</router-link>
        </div>
        </div>
      </div>
    </div>
  </div>
    </div>
</template>
<script>
</script>
<style scoped="scoped">
    .row {
        padding: 10%
    }
    
    .submit {
        text-align: center
    }
    
    .loginTitle {
        text-align: center;
        font-size: 20pt;
    }
    
    .loginTitle .lable {
        font-size: 100px
    }
</style>

<script>
    import Validator from 'vue-validator'
    import * as Const from '../const'
    import {
        mapGetters
    } from 'vuex'
    export default {
        data() {
                return {
                    userInfo: {
                    }
                }
            },
            computed: Validator.mapValidation({
                valid: '$validation.registerValidation.valid'
            }),
            validators: { // `numeric` and `url` custom validator is local registration
                isPhone: function(val) {
                    var flag = /^1(3|4|5|7|8)\d{9}$/.test(this.register.phone)
                    var validity = this.$refs.phone
                    if (!flag) {
                        return false
                    }
                    return this.$http.post(Const.URL_PREX + '/checkPhone', {
                        "phone": this.register.phone
                    }, {
                        emulateJSON: true
                    }).then((response) => {
                        if (!response.data.Status) {
                            // this.validations.phone.css = "invalid"

                            $("#phone-l").attr("data-error", response.data.Mesg)
                            this.$refs.phone.valid = false
                            this.$refs.phone.validate()
                            validate
                            console.log(this.$refs.phone)
                            return false
                        } else {
                            this.validations.phone.css = "valid"


                        }
                    }, (response) => {
                        this.validations.phone.css = "invalid"

                        $("#phone-l").attr("data-error", "链接服务器异常")
                        $("#phone").removeClass("valid")
                        $("#phone").addClass("invalid")
                        this.$refs.phone.valid = false
                    });
                },
                exist: function(val) {
                    console.log("exist")
                    return fetch(Const.URL_PREX + '/checkPhone', {
                        method: 'post',
                        headers: {
                            'Accept': 'application/json',
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({
                            phone: this.register.phone
                        })
                    }).then((res) => {
                        console.log(res.data)
                        return res.json()
                    }).then((json) => {
                        return Object.keys(json).length > 0 ? Promise.reject(new ValidationError(json.message)) : Promise.resolve()
                    }).catch((error) => {
                        if (error instanceof ValidationError) {
                            return Promise.reject(error.message)
                        } else {
                            return Promise.reject('unexpected error')
                        }
                    })


                },
                password: function(val) {
                    return /^(\w){6,16}$/.test(val)
                },
                confirm: function(val) {
                    if (val == this.register.password) {
                        return true
                    } else {
                        return false
                    }

                },
                url: function(val) {
                    return /^(http\:\/\/|https\:\/\/)(.{4,})$/.test(val)
                }
            },
            methods: {
                userLogin(i) {
                    console.log(this.userInfo)
                    this.$store.dispatch('userLogin', this.userInfo)
                }
            }
    }
</script>